$(function () {

    initArtCateList();
    function initArtCateList() {
        $.ajax({
            method: 'get',
            url: '/my/article/cates',
            success: function (res) {
                console.log(res);
                var htmlstr = template('tpl-table', res);
                $('tbody').html(htmlstr);
            }
        })
    }

    var layer = layui.layer;
    var indexAdd = null;
    var form = layui.form;

    //弹出添加类别
    $('#btnAddCate').on('click', function () {
        // 调用open方法会产生一个带索引号的弹出层
        indexAdd = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '添加文章分类',
            content: $('#dialog-add').html()
        })
    });

    //form-add是点击添加类别渲染出来的，需要事件委托
    $('body').on('submit', '#form-add', function (e) {
        e.preventDefault();
        $.ajax({
            method: 'post',
            url: '/my/article/addcates',
            //用serialize()获取表单的所有数据时，表单必须有与后台一致的name属性值
            data: $(this).serialize(),
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('新增分类失败！')
                }
                layer.msg('新增分类成功！');
                initArtCateList();
                // 用open产生的索引号老关闭对应的弹出层
                layer.close(indexAdd);
            }
        })
    });

    //点击删除
    $('tbody').on('click', '.del', function () {
        var id = $(this).attr('id');
        console.log(id);
        layer.confirm('确认删除吗？', {
            icon: 3, title: '提示'
        }, function (index) {
            $.ajax({
                method: 'get',
                //传参方法2：url+值，属性名由后台自动添加
                url: '/my/article/deletecate/' + id,
                success: function (res) {
                    if (res.status !== 0) {
                        return layer.msg('删除分类失败！')
                    }
                    layer.msg('删除分类成功！');
                    initArtCateList();
                    layer.close(index);
                }
            })

        })

    });

    var indexEdit = null;
    $('tbody').on('click', '.edit', function () {
        // 弹出一个修改文章分类信息的层
        indexEdit = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '修改文章分类',
            content: $('#dialog-edit').html()
        });

        // 获得当前编辑所在数据的id
        var id = $(this).attr('id')
        // 发起请求获取对应分类的数据
        $.ajax({
            method: 'GET',
            url: '/my/article/cates/' + id,
            success: function (res) {
                console.log(res.data);
                // 自动填充当前编辑数据的表单内容
                form.val('form-edit', res.data)
            }
        });
    });

    // 监听编辑的提交事件
    $('body').on('submit', '#form-edit', function (e) {
        e.preventDefault();
        $.ajax({
            method: 'POST',
            url: '/my/article/updatecate',
            data: $(this).serialize(),
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('更新分类数据失败！')
                }
                layer.msg('更新分类数据成功！');
                layer.close(indexEdit);
                initArtCateList();
            }
        })
    })



})







// $(function() {
//   var layer = layui.layer

//   initArtCateList()

//   // 获取文章分类的列表
//   function initArtCateList() {
//     $.ajax({
//       method: 'GET',
//       url: '/my/article/cates',
//       success: function(res) {
//         var htmlStr = template('tpl-table', res)
//         $('tbody').html(htmlStr)
//       }
//     })
//   }

//   // 为添加类别按钮绑定点击事件
//   var indexAdd = null
//   $('#btnAddCate').on('click', function() {
//     indexAdd = layer.open({
//       type: 1,
//       area: ['500px', '250px'],
//       title: '添加文章分类',
//       content: $('#dialog-add').html()
//     })
//   })

//   // 通过代理的形式，为 form-add 表单绑定 submit 事件
//   $('body').on('submit', '#form-add', function(e) {
//     e.preventDefault()
//     $.ajax({
//       method: 'POST',
//       url: '/my/article/addcates',
//       data: $(this).serialize(),
//       success: function(res) {
//         if (res.status !== 0) {
//           return layer.msg('新增分类失败！')
//         }
//         initArtCateList()
//         layer.msg('新增分类成功！')
//         // 根据索引，关闭对应的弹出层
//         layer.close(indexAdd)
//       }
//     })
//   })
// })
